<template>
  <View class="task-card" :class="{'expired-card': taskStatus === 'Expired' && !isPending}">
    <image v-if="taskStatus === 'OnGoing'" mode="widthFix"
      :src="`${imgBasePath}newtask/task-card-undone.png`" class="card-bg">
    </image>
    <image v-if="taskStatus === 'Done'" mode="widthFix" :src="`${imgBasePath}newtask/task-card-complete.png`"
      class="card-bg"></image>
    <image v-if="taskStatus === 'Expired'" mode="widthFix" :src="`${imgBasePath}newtask/task-card-expire.png`"
      class="card-bg"></image>
    <View class="content">
      <template>
        <View class="amount" v-if="taskStatus !== 'Expired'">
          <Text class="number">{{ activityDetail.reward }}</Text>
          <Text class="unit">元</Text>
        </View>
        <!-- <View class="button">做任务 领现金</View> -->
        <image v-if="taskStatus === 'OnGoing'" @click="onReceiveReward()" mode="widthFix"
        :src="`${imgBasePath}newtask/icon-task-complete.png`" class="task-button"></image>
        <View v-if="taskStatus === 'Done'" class="get-reward get-all-reward">恭喜获得全部新人奖励</View>
        <View v-if="taskStatus === 'Expired'" class="get-reward get-part-reward">
          <Text v-if="isPending">您在活动中获得 {{ activityDetail.reward }} 元</Text>
          <Text v-else>敬请期待其他精彩活动</Text>
        </View>
        <View class="bottom" v-if="taskStatus === 'OnGoing'">
          <swiper autoplay :interval="1500" :display-multiple-items="4" circular class="swiper">
            <swiper-item v-for="(item, index) in motivations" :key="index" class="swiper-item">
              <View class="swiper-item-image-box">
                <image class="swiper-item-image" :src="item.avatar"></image>
              </View>
            </swiper-item>
          </swiper>
          <Text class="bottom-tip">99+都已领到现金</Text>
        </View>
      </template>
    </View>
  </View>
</template>
<script>
import { imgBasePath } from "@/common/config";
export default {
  name: "taskCard",
  props: {
    // OnGoing: 活动进⾏中, Done: 活动已完成, Expired: 活动已过期
    activityDetail: {
      type: Object,
      default: () => {
        return {}
      }
    },
    motivations: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      imgBasePath,
    }
  },
  computed: {
    taskStatus: function () {
      return this.activityDetail.userActivityStatus;
    },
     // 活动是否在进行中
     isPending: function () {
      return !!(this.activityDetail.tasks || []).find(item => item.progress > 0);
    },
  },
  watch: {
   
  },
  mounted() {

  },

  methods: {
    onReceiveReward() {
      this.$emit('onReceiveReward');
    }
  }
}
</script>

<style lang="scss" scoped>
.expired-card {
  margin-top: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.task-card {
  position: relative;
  z-index: 1;
  margin-top: 34rpx;

  .card-bg {
    width: 100%;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;

    .amount {
      margin-top: 90rpx;
      color: #FD3236;
    }

    .number {
      font-size: 120rpx;
      font-family: "Futura-Bold";
      font-weight: 700;
    }

    .unit {
      font-family: "PingFangSC-Medium";
      font-size: 43rpx;
      margin-left: 20rpx;
    }

    .task-button {
      width: 490rpx;
      margin-top: 113rpx;
      font-size: 20rpx;
      color: #6F553F;
      font-weight: 900;
      font-family: "FZFW-ZhuZiHeiS-U--GB1-0";
    }

    .bottom {
      margin-top: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .swiper {
        height: 58rpx;
        width: 202rpx;
        .swiper-item {
          overflow: visible !important;
          // width: 44rpx;
          // height: 54rpx;
        }

        .swiper-item-image-box {
          width: 58rpx;
          height: 58rpx;
          border: 2rpx solid #fff;
          border-radius: 50%;
        }

        .swiper-item-image {
          width: 54rpx;
          height: 54rpx;
          border-radius: 50%;
        }
      }

      .bottom-tip {
        margin-left: 18rpx;
        font-size: 29rpx;
        color: #FDE1B4;
        font-weight: 600;
        font-family: PingFangSC-Semibold;
      }
    }

    // .get-all-reward {
    //   margin-top: 120rpx;
    //   width: 485rpx;
    // }
    .get-reward {
      font-family: "FZFW-ZhuZiHeiS-U--GB1-0";
      font-size: 46rpx;
      color: #FDE1B4;
      letter-spacing: 1.12rpx;
      text-align: center;
      font-weight: 900;

    }

    .get-all-reward {
      margin-top: 120rpx;
    }

    .get-part-reward {
      margin-top: 345rpx;
    }
  }
}</style>